<template>
  <div class="interfaceConfig">
    <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane :label="item.name"
                     :name="item.value"
                     :key="item.value"
                     v-for="item in menu"></el-tab-pane>
        <!-- <el-tab-pane :label="'来电对接'"
                     name="callUrl"></el-tab-pane>
        <el-tab-pane :label="'首页对接'"
                     name="indexUrl"></el-tab-pane>
        <el-tab-pane :label="'客户TAB对接'"
                     name="tabUrl"></el-tab-pane>
        <el-tab-pane :label="'外呼对接'"
                     name="dialoutUrl"></el-tab-pane>
        <el-tab-pane :label="'对接全局设置'"
                     name="allUrlConfig"></el-tab-pane>
        <el-tab-pane :label="'通话事件'"
                     name="callEvent"
                     v-if = "showCallEvent"></el-tab-pane> -->
      </el-tabs>
    <div  class="wapper">
        <keep-alive>
          <router-view></router-view>
        </keep-alive>
    </div>
  </div>
</template>
<script>
  import { isHasMenu } from '@/utils/m7Utils'
  export default {
    name: 'interfaceConfig',
    data () {
      return {
        activeName: '',
        menu: [
          {name: this.$t('configLazyLoad.interfaceConfig.callUrl'), value: 'callUrl', id: 'call_in_interface'},
          {name: this.$t('configLazyLoad.interfaceConfig.indexUrl'), value: 'indexUrl', id: 'home_page_interface'},
          {name: this.$t('configLazyLoad.interfaceConfig.tabUrl'), value: 'tabUrl', id: 'customer_tab_interface'},
          {name: this.$t('configLazyLoad.interfaceConfig.dialoutUrl'), value: 'dialoutUrl', id: 'call_out_interface'},
          {name: this.$t('configLazyLoad.interfaceConfig.allUrlConfig'), value: 'allUrlConfig', id: 'global_config_interface'},
          {name: this.$t('configLazyLoad.interfaceConfig.callEvent'), value: 'callEvent', id: 'interface_add_call_event_pane'},
          {name: this.$t('configLazyLoad.interfaceConfig.smsUrl'), value: 'smsUrl', id: 'sms_interface'},
          {name: '自定义logo', value: 'customizeLogo', id: 'custom_logo_interface'},
          {name: '工具栏设置', value: 'toolbarConfig', id: 'toolbar_config'}

        ]
      }
    },
    computed: {
    },
    methods: {
      isCallEvent () {
        this.menu = this.menu.filter(item => {
          return !item.id || (item.id && isHasMenu(item.id, this.$store.state.session.user))
        })
        this.activeName = this.menu[0].value
        this.$router.push({path: '/index/config/interfaceConfig/' + this.activeName})
      },
      handleClick (tab) {
        this.$router.push({path: '/index/config/interfaceConfig/' + tab.name})
      }
    },
    beforeMount () {
      this.isCallEvent()
    },
    beforeRouteLeave (to, from, next) {
      this.currentRoute = from.fullPath
      next()
    },
    beforeRouteEnter (to, from, next) {
      next(vm => {
        if (to.query.active) {
        } else if (vm.currentRoute) {
          vm.$router.push({path: vm.currentRoute})
        }
      })
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../assets/common.styl"
  .interfaceConfig
    height calc(100vh - 96px)
</style>
